{% extends 'base.html' %}

{% block title %}{{ title }}{% endblock %}

{% block page_title %}{{ page_title }}{% endblock %}

{% block breadcrumb_active %}{{ breadcrumb_active }}{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-6">
        <div class="card card-primary">
            <div class="card-header">
                <h3 class="card-title">主题设置</h3>
            </div>
            <form method="post" action="{% url 'change_theme' %}">
                {% csrf_token %}
                <div class="card-body">
                    <div class="form-group">
                        <label>选择主题颜色：</label>
                        <div class="form-check">
                            <input type="radio" name="theme" id="theme-default" value="default" class="form-check-input" {% if current_theme == 'default' %}checked{% endif %}>
                            <label for="theme-default" class="form-check-label">
                                <i class="fas fa-circle mr-2 text-primary"></i> 默认主题
                            </label>
                        </div>
                        <div class="form-check">
                            <input type="radio" name="theme" id="theme-blue" value="blue" class="form-check-input" {% if current_theme == 'blue' %}checked{% endif %}>
                            <label for="theme-blue" class="form-check-label">
                                <i class="fas fa-circle mr-2 text-blue"></i> 蓝色主题
                            </label>
                        </div>
                        <div class="form-check">
                            <input type="radio" name="theme" id="theme-green" value="green" class="form-check-input" {% if current_theme == 'green' %}checked{% endif %}>
                            <label for="theme-green" class="form-check-label">
                                <i class="fas fa-circle mr-2 text-green"></i> 绿色主题
                            </label>
                        </div>
                        <div class="form-check">
                            <input type="radio" name="theme" id="theme-purple" value="purple" class="form-check-input" {% if current_theme == 'purple' %}checked{% endif %}>
                            <label for="theme-purple" class="form-check-label">
                                <i class="fas fa-circle mr-2 text-purple"></i> 紫色主题
                            </label>
                        </div>
                        <div class="form-check">
                            <input type="radio" name="theme" id="theme-red" value="red" class="form-check-input" {% if current_theme == 'red' %}checked{% endif %}>
                            <label for="theme-red" class="form-check-label">
                                <i class="fas fa-circle mr-2 text-danger"></i> 红色主题
                            </label>
                        </div>
                        <div class="form-check">
                            <input type="radio" name="theme" id="theme-yellow" value="yellow" class="form-check-input" {% if current_theme == 'yellow' %}checked{% endif %}>
                            <label for="theme-yellow" class="form-check-label">
                                <i class="fas fa-circle mr-2 text-warning"></i> 黄色主题
                            </label>
                        </div>
                        <div class="form-check">
                            <input type="radio" name="theme" id="theme-black" value="black" class="form-check-input" {% if current_theme == 'black' %}checked{% endif %}>
                            <label for="theme-black" class="form-check-label">
                                <i class="fas fa-circle mr-2 text-dark"></i> 黑色主题
                            </label>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <button type="submit" class="btn btn-primary">应用主题</button>
                </div>
            </form>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card card-info">
            <div class="card-header">
                <h3 class="card-title">主题颜色切换说明</h3>
            </div>
            <div class="card-body">
                <p>选择不同的主题后，系统界面将会立即更新。主题设置会保存在您的会话中，下次登录时仍然有效。</p>
                <p>如果您想恢复默认主题，请选择"默认主题"选项并点击"应用主题"按钮。</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}